<template>
	<view>
		<view class="top">
			<view class="com_title">提现金额</view>
			<view class="num"><text class="fu">￥</text>{{result.total}}</view>
			<view class="status">{{result.stateName}}</view>
		</view>
		<view class="progress">
			<view class="one one acv">
				<text class="cri active"></text>
				<view class="title">
					<view class="name">发起申请</view>
				</view>
			</view>
			<view class="two one"  :class="[result.state ?'acv':'']">
				<text class="cri active uniicons" v-if="result.state == '0'">&#xe472;</text>
				<text class="cri active" v-else></text>
				<view class="title">
					<view class="name">系统审批</view>
					<view class="time">{{result.applyTime}}</view>
				</view>
			</view>
			<view class="three">
				<text class="cri active uniicons" v-if="result.state > 0">&#xe472;</text>
				<text class="cri" v-else></text>
				<view class="title">
					<view class="name">申请结果</view>
					<view>{{result.grantTime}}</view>
				</view>
			</view>
		</view>
		<view class="bottom">
				<text class="name">到账账户</text>
				<text>{{result.bankName}} <text v-if="result.bankNum">({{result.bankNum}})</text> </text>
		</view>
		<wyb-button class="btn" :ripple="true" type="filled" color="#585cf7" v-if="showBtn"
		:radius="radius" width="100%" height="88rpx" font-size="32rpx" @click="toBack"
			>完成</wyb-button> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showBtn:false,
				result: {},
				radius: ['100px']
			};
		},
		onLoad(option) {
			let id = option.id;
			this.getInfo(id);
			this.showBtn = JSON.parse(option.show);
		},
		methods:{
			//获取提现详情
			getInfo(id) {
				this.$api.getExtractInfo(id).then(res=> {
					console.log(res)
					this.result = res.data.data;
				})
			},
			toBack() {
				uni.navigateBack({
					delta: 2
				})
			}
		}
	}
</script>
<style>
	page{padding: 0 30rpx; box-sizing: border-box;}
</style>
<style lang="scss" scoped>
	.top{text-align: center;padding: 40rpx 0;
		.num{font-size: 48rpx;}
		.fu{font-size: 36rpx;}
		.status{font-size: 28rpx; color:#FC4073}
	}
	.progress{display: flex;justify-content: space-around;
		.one,.three{flex: 1;text-align: center;position: relative;z-index: 2;}
		.one::after{content: "";width: 100%; height:2rpx;background: #CCCCCC;position: absolute;
			left: 50%;top: 28rpx;z-index: 1;
		}
		.cri{width: 26rpx;height:26rpx;background: #CCCCCC;border-radius: 50%;display: inline-block;position: relative;z-index: 2;margin-top: 16rpx;}
		.active.cri{background: #585CF7}
		.acv::after{background: #585CF7;}
		.uniicons{width: 58rpx;height: 58rpx;color: #FFFFFF;line-height: 58rpx;font-size: 38rpx;margin-top: 0;}
		.title{margin-top: 20rpx;}
		.time{font-size: 24rpx; color:#999999}
	}
	.bottom{margin-top: 30rpx;display: flex;justify-content: space-between;
		.name{color: #999;}
	}
	.btn{margin-top: 180rpx;}
</style>
